<style>
    .layui-table th {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-table td {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-input-my {
        height: 34px !important;
        line-height: 34px !important;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
    }

    .special-label {
        float: left;
        display: block;
        padding: 9px 0 !important;
        width: 100px !important;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
</style>
<div class="layui-form" lay-filter="form-pdr-api">
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
    <fieldset class="layui-elem-field">
        <legend>接口基础信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">服务项目</label>
                <div class="layui-input-block">
                    <select name="pdrProjectId" id="pdrProjectId" lay-filter="pdrProjectId" disabled></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">接口名称</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="name" value="{{ d.params.name  || ''}}" autocomplete="off"
                               class="layui-input" disabled>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口描述</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="description" value="{{ d.params.description  || ''}}"
                               autocomplete="off" class="layui-input" disabled>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求类型</label>
                <div class="layui-input-block">
                    <select name="queryType" id="queryTypeEdit" disabled>
                        <option value="">请选择请求类型</option>
                        <option value="GET">GET</option>
                        <option value="PUT">PUT</option>
                        <option value="POST">POST</option>
                        <option value="DELETE">DELETE</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求路径</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="path" value="{{ d.params.path  || ''}}" autocomplete="off"
                               class="layui-input" disabled>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口状态</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="radio" name="enable" value="1" title="启用" {{ (d.params.enable==1)?'checked':''}}
                               disabled>
                        <input type="radio" name="enable" value="0" title="禁用" {{ (d.params.enable==0)?'checked':''}}
                               disabled>
                    </script>
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>出入参配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">接口入参</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <textarea name="inParam" class="layui-textarea" disabled>{{ d.params.inParam  || ''}}</textarea>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口出参</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <textarea name="outParam" class="layui-textarea"
                                  disabled>{{ d.params.outParam  || ''}}</textarea>
                    </script>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>限流配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">每秒请求数</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="number" name="permitsPerSecond" value="{{ d.params.permitsPerSecond  || 1000}}"
                               class="layui-input" disabled>
                    </script>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>防火墙配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">IP黑名单</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <textarea name="blackList" class="layui-textarea"
                                  disabled>{{ d.params.blackList  || ''}}</textarea>
                    </script>
                </div>
            </div>
        </div>
    </fieldset>

<!--    <fieldset class="layui-elem-field">-->
<!--        <legend>熔断/降级配置</legend>-->
<!--        <div class="layui-field-box">-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">groupKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="text" name="groupKey" value="{{ d.params.hystrixParam.groupKey  || ''}}"-->
<!--                               autocomplete="off" class="layui-input" disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">commandKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="text" name="commandKey" value="{{ d.params.hystrixParam.commandKey  || ''}}"-->
<!--                               autocomplete="off" class="layui-input" disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">休眠重试间隔</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="sleepWindowInMilliseconds"-->
<!--                               value="{{ d.params.hystrixParam.sleepWindowInMilliseconds  || ''}}"-->
<!--                               class="layui-input"-->
<!--                               disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">请求超时时间</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="timeoutInMilliseconds"-->
<!--                               value="{{ d.params.hystrixParam.timeoutInMilliseconds  || ''}}"-->
<!--                               class="layui-input"-->
<!--                               disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">短路最小请求数</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="requestVolumeThreshold"-->
<!--                               value="{{ d.params.hystrixParam.requestVolumeThreshold  || ''}}"-->
<!--                               class="layui-input"-->
<!--                               disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">失败百分比阈值</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="errorThresholdPercentage"-->
<!--                               value="{{ d.params.hystrixParam.errorThresholdPercentage  || ''}}"-->
<!--                               class="layui-input"-->
<!--                               disabled>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </fieldset>-->


    <fieldset class="layui-elem-field">
        <legend>授权情况</legend>
        <div class="layui-field-box">
            <div id="grantList">

            </div>
        </div>
    </fieldset>
</div>

<script>
    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter'], function () {
            var $ = layui.$
                , admin = layui.admin
                , form = layui.form
                , setter = layui.setter;

            var apiUrl = setter.apiUrl;

            initForm();

            function initForm() {
                $("#queryTypeEdit").val(params.queryType);
                loadProject();
                loadGrant();
                form.render();
                form.render('select');
            }

            function loadProject() {
                admin.req({
                    url: apiUrl + '/mapi/producer/detail/' + params.pdrProjectId
                    , method: 'get'
                    , done: function (response) {
                        if (response.code === 0) {
                            let project = response.data;
                            let html = "<option value='" + project.id + "'>" + project.name + "</option>";
                            $('#pdrProjectId').append(html);
                            form.render('select');
                        } else {
                            layer.msg(response.msg, {
                                offset: '15px', icon: 2
                            });
                        }
                    }
                });
            }

            function loadGrant() {
                admin.req({
                    url: apiUrl + '/mapi/interface/grant/info/' + params.id
                    , method: 'get'
                    , done: function (response) {
                        if (response.code === 0) {
                            let csmProject = response.data;
                            if (csmProject.length > 0) {
                                var html = '';
                                for (let i = 0; i < csmProject.length; i++) {
                                    let csm = csmProject[i];
                                    html += '<span style="padding: 5px 20px;margin: 5px 5px;border: solid 1px #1E9FFF;">' + csm.name + '</span>';
                                }
                                $('#grantList').html(html);
                            }
                        } else {
                            layer.msg(response.msg, {
                                offset: '15px', icon: 2
                            });
                        }
                    }
                });
            }

        });
    }
</script>